<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <style>
        .f20 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.querySelector('#root'));
        const list = [
            {
                id: 1,
                name: 'jack',
                content: 'rose, you jump i jump',
                time: '03:21'
            },
            {
                id: 2,
                name: 'rose',
                content: 'jack, you see you, one day day',
                time: '03:22'
            },
            {
                id: 3,
                name: 'tom',
                content: 'jack, ........',
                time: '03:23'
            },
            {
                id: 4,
                name: 'tom',
                content: '',
                time: '03:23'
            }
        ]
        root.render(
            (
                <div>
                    {list.length === 0 ? (<h1>暂无评论</h1>) : (
                        <ul>
                            {list.map(item => (
                                    <li key={item.id}>
                                        <a href="" onClick={(e) => e.preventDefault()}>
                                            <h3 style={{fontSize: 25}}>{item.name}</h3>
                                            <p className="f20" onClick={() => alert(item.time)}>{item.content}</p>
                                        </a>
                                    </li>
                                )
                            )}
                        </ul>
                    )}
                </div>
            )
        );
        //    </li>
    </script>
</body>
</html>